
<h4>用户列表</h4>
<form nz-form class="">
  <div nz-row [nzGutter]="40" class="mgb20">
    <div nz-col [nzSpan]="6">
      <input nz-input placeholder="用户名" [(ngModel)]="value.username.val" name="value.username.val"/>
    </div>
    <div nz-col [nzSpan]="6">
      <input nz-input placeholder="用户昵称" [(ngModel)]="value.nick_name.val" name="value.nick_name.val"/>
    </div>
    <div nz-col [nzSpan]="6">
      <input nz-input placeholder="备注" [(ngModel)]="value.remark.val" name="value.remark.val"/>
    </div>
  </div>

  <div nz-row>
    <div nz-col [nzSpan]="24" class="right-btns">
      <button nz-button [routerLink]="['/user/add']"><i class="anticon anticon-plus"></i><span>添加</span></button>
      <button nz-button (click)="clear()">清空</button>
      <button nz-button [nzType]="'primary'" (click)="query()">查询</button>
    </div>
  </div>
</form>

<nz-table #nzTable
  [nzData]="dataSet"
  [nzFrontPagination]="false"
  [nzShowSizeChanger]="false"
  [nzLoading]="_loading"
  [nzTotal]="total"
  [(nzPageIndex)]="current_page"
  (nzPageIndexChange)="query()"
  [(nzPageSize)]="per_page"
  (nzPageSizeChange)="query()">
  <thead nz-thead>
    <tr>
      <th nz-th nzWidth="160px"><span>ID</span></th>
      <th nz-th><span>用户名称</span></th>
      <th nz-th><span>用户昵称</span></th>
      <th nz-th><span>性别</span></th>
      <th nz-th><span>用户类型</span></th>
      <th nz-th style="width:300px;"><span>备注</span></th>
      <th nz-th><span>创建时间</span></th>
      <th nz-th><span>操作</span></th>
    </tr>
  </thead>
  <tbody nz-tbody>
    <tr nz-tbody-tr *ngFor="let data of nzTable.data">
      <td nz-td>{{data.id}}</td>
      <td nz-td>{{data.username}}</td>
      <td nz-td>{{data.nick_name}}</td>
      <td nz-td>{{data.sex}}</td>
      <td nz-td>{{data.user_type}}</td>
      <td nz-td><div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;" title="{{data.remark}}">{{data.remark}}</div>
      </td>
      <td nz-td>{{data.created_at}}</td>
      <td nz-td>
        <a href="#" [routerLink]="['/user/edit', data.id]">编辑</a>
        <a href="javascript:;" (click)="delUser(data.id)">删除</a>
      </td>
    </tr>
  </tbody>
</nz-table>


<nz-modal [nzVisible]="isVisible" [nzTitle]="'警告'" [nzContent]="modalContent" (nzOnCancel)="isVisible=false" (nzOnOk)="delUser('')" [nzOkLoading]="isConfirmLoading">
  <ng-template #modalContent>
    <p>确认删除该条信息？</p>
  </ng-template>
</nz-modal>